<template>
  <div class="pie" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'PieCharts',
  data() {
    return {
      chart: null, // 存储图表实例
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          itemWidth: 14,
          itemHeight: 6,
          itemGap: 20,
          right: '8%',
          top: '4%',
          textStyle: {
            fontSize: '14px',
            color: '#fff',
          },
          data: ['订单'],
        },
        xAxis: {
          name: '',
          data: [
            '03-01',
            '03-02',
            '03-03',
            '03-04',
            '03-05',
            '03-06',
            '03-07',
            '03-08',
            '03-09',
            '03-10',
            '03-11',
            '03-12',
          ],
          type: 'category',
          boundaryGap: false,
          itemStyle: {
            borderColor: 'blue',
            color: '#ffffff',
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          axisLine: {
            show: false,
            symbol: ['none', 'arrow'],
            symbolSize: [10, 15],
            symbolOffset: [0, 0],
            lineStyle: {
              width: 2,
              color: 'rgba(255,255,255,0.6)',
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: '12',
            },
          },
        },
        yAxis: {
          name: '',
          type: 'value',
          nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 6, 0],
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(232, 232, 232, 0.2)',
            },
          },
          axisLine: {
            show: false,
            symbol: ['none', 'arrow'],
            symbolSize: [10, 15],
            symbolOffset: [0, 0],
            lineStyle: {
              width: 2,
              color: 'rgba(255,255,255,0.6)',
            },
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: '12',
            },
          },
        },
        grid: {
          left: '2%',
          top: '20%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        series: [
          {
            data: [10, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
            name: '订单',
            type: 'line',
            symbol: 'circle',
            smooth: true,
            showAllSymbol: true,
            symbolSize: 10,
            lineStyle: {
              width: 2,
              type: 'solid',
              color: '#00acf5',
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
              },
            },

            lineStyle: {
              width: 2,
              type: 'solid',
              color: '#00acf5',
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(27, 136, 255, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(27, 136, 255, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(27, 136, 255, 0)',
                shadowBlur: 20,
              },
            },
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.pie {
  width: 100%;
  height: 280px;
  position: absolute;
  top: 0px;
}
</style>
